<template>
  <div class="background-processer">
    <styled-uploader v-if="!value" @success="onImageUploaded" />
    <div v-else>
      <image-processer
        :value="value"
        :showDelete="true"
        @change="handleUploadUrl"
      />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { message } from "ant-design-vue";
import ImageProcesser from "./ImageProcesser.vue";
import StyledUploader from "./StyledUploader.vue";
// import { RespUploadData } from "../store/respTypes";
export default defineComponent({
  name: "BackgroundProcesser",
  props: {
    value: {
      type: String,
      required: true,
    },
  },
  components: {
    ImageProcesser,
    StyledUploader,
  },
  emits: ["change"],
  setup(props, { emit }) {
    const handleClick = () => {
      message.info("Clicked!");
    };
    const onImageUploaded = (data: { resp: any; file: File }) => {
      const { resp } = data;
      console.log("BackgroundProcesser onImageUploaded resp");
      console.log(resp);
      message.success("上传成功");
      emit("change", resp.data.urls[0]);
    };
    return {
      handleClick,
      handleUploadUrl: (url: string) => {
        emit("change", url);
      },
      onImageUploaded,
    };
  },
});
</script>
